<html>
<head>
    <title>Hello Earth!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="Ext.ux.GEarthPanel-1.1.css" />
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAvQLslBJZByOlS8Y3iPXgexSV5romlzgkIRRVpZz7TQ7Jsa0ZQxRh2GVXWb7jYX7ajChOO9olKH0Sgg"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-611.js"></script>
  	<script type="text/javascript" src="Ext.ux.GEarthPanel-1.1.js"></script>
    <script type="text/javascript">

        google.load("earth", "1");
        google.load("maps", "2.xx");


        Ext.onReady(function(){

            // Create Google Earth panel
            var earthPanel = new Ext.ux.GEarthPanel({
                title: 'Hello Earth!',
                renderTo: 'myEarth',
                width: 700,
                height: 500,
                earthLayers: {
                    LAYER_BUILDINGS: true,
                    LAYER_TERRAIN: true
                },
                earthOptions: {
                    setStatusBarVisibility: true,
                    setAtmosphereVisibility: true,
                    setMouseNavigationEnabled: true
                }
            });

            // Fly to Oslo
            earthPanel.on('earthLoaded', function(){
                earthPanel.findLocation('Oslo');
            });

        });

    </script>

</head>
<body style="margin: 30px;">
    <div id="myEarth"></div>
</body>
</html>